<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: lijincheng
  Date: 2021/5/6
  Time: 9:26 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Book Library - Book Guide Author, Publication and Store</title>
    <!-- CUSTOM STYLE -->
    <link href="/css/style.css" rel="stylesheet">
    <!-- THEME TYPO -->
    <link href="/css/themetypo.css" rel="stylesheet">
    <!-- BOOTSTRAP -->
    <link href="/css/bootstrap.css" rel="stylesheet">
    <!-- COLOR FILE -->
    <link href="/css/color.css" rel="stylesheet">
    <!-- FONT AWESOME -->
    <link href="/css/font-awesome.min.css" rel="stylesheet">
    <!-- BX SLIDER -->
    <link href="/css/jquery.bxslider.css" rel="stylesheet">

    <link href="/css/bootstrap-slider.css" rel="stylesheet">

    <link href="/css/widget.css" rel="stylesheet">

    <link href="/css/shortcode.css" rel="stylesheet">
    <!-- responsive -->
    <link href="/css/responsive.css" rel="stylesheet">
    <!-- Component -->
    <link href="/js/dl-menu/component.css" rel="stylesheet">
    <style>
        .col-md-12,.col-md-5,.col-md-4{
            margin-bottom: 2%;
        }
        #upBox{
            text-align: center;
            width:500px;
            padding: 20px;
            border: 1px solid #666;
            margin: auto;
            position: relative;
            border-radius: 10px;
        }
        #inputBox{
            width: 100%;
            height: 40px;
            border: 1px solid cornflowerblue;
            color: cornflowerblue;
            border-radius: 20px;
            position: relative;
            text-align: center;
            line-height: 40px;
            overflow: hidden;
            font-size: 16px;
        }
        #inputBox input{
            width: 114%;
            height: 40px;
            opacity: 0;
            cursor: pointer;
            position: absolute;
            top: 0;
            left: -14%;

        }
        #imgBox{
            text-align: left;
        }
        .imgContainer{
            display: inline-block;
            width: 32%;
            height: 150px;
            margin-left: 1%;
            border: 1px solid #666666;
            position: relative;
            margin-top: 30px;
            box-sizing: border-box;
        }
        .imgContainer img{
            width: 100%;
            height: 150px;
            cursor: pointer;
        }
        .imgContainer p{
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 30px;
            background: black;
            text-align: center;
            line-height: 30px;
            color: white;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            display: none;
        }
        .imgContainer:hover p{
            display: block;
        }
        #btn{
            display: inline-block;
            text-align: center;
            line-height: 30px;
            outline: none;
            width: 100px;
            height: 30px;
            background-color: #ee4a02;
            border: 1px solid cornflowerblue;
            color: white;
            cursor: pointer;
            margin-top: 30px;
            border-radius: 5px;
        }
        body{
            background-color: #a6b6d0;
            background-size: cover;
        }

    </style>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div id="loader-wrapper">
    <div id="loader"></div>

    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>

</div>
<!--WRAPPER START-->
<div class="wrapper kode-header-class-3">
    <!--HEADER START-->
    <header class="header-3">
        <div class="container">
            <div class="logo-container">
                <div class="row">
                    <div class="col-md-3">
                        <!--LOGO START-->
                        <div class="logo">
                            <a href="#"><img src="/images/logo-2.png" alt=""></a>
                        </div>
                        <!--LOGO END-->
                    </div>
                    <div class="col-md-9">
                        <div class="top-strip">
                            <div class="pull-left">
                                <p>Welcome to Library theme</p>
                            </div>
                            <div class="social-icon">
                                <li><a href="#" class="pull-left">欢迎 ${sessionScope.user.getUName()}</a></li>
                            </div>
                        </div>
                        <div class="kode-navigation">
                            <ul>
                                <li><a href="/">主页</a>
                                    <ul>
                                        <li><a href="/">主页</a></li>
                                    </ul>
                                </li>
                                        <li><a href="">图书管理</a>
                                            <ul>
                                                <li><a href="/ubook/post/index">发布图书</a></li>
                                                <li><a href="/ubook/myBooks">我的发布记录</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="">购物车</a>
                                            <ul>
                                                <li><a href="/shop/car/index">我的购物车</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="">订单管理</a>
                                            <ul>
                                                <li><a href="/order/index">所有订单</a></li>
                                                <li><a href="">待收货</a></li>
                                                <li><a href="">已完成</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="">个人中心</a>
                                            <ul>
                                                <li><a href="/user/userInfo/#caa">个人信息</a></li>
                                                <li><a href="/browse/history/list">我的浏览记录</a></li>
                                                <li><a href="/user/loginout">退出登陆</a></li>
                                            </ul>
                                        </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!--HEADER END-->
    <div class="kode-inner-banner" style="background-image: url('/images/style2-blog3.png');">
        <div class="kode-page-heading">
            <ol class="breadcrumb">
                <li><a href="#">主页</a></li>
                <li class="active">发布图书</li>
            </ol>
        </div>
    </div>
    <!--CONTENT START-->
    <div class="kode-content padding-tb-50">
        <!--TOP AUTHERS START-->
        <div class="container" style="width: 60%">
            <div class="row">
                <div class="col-md-12">
                    <div class="input-group">
                        <label class="input-group-addon">标题</label>
                        <input type="text" class="form-control" id="title">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="input-group">
                        <label class="input-group-addon">书籍类型</label>
                        <select class="form-control" id="book_type">
                            <c:forEach items="${category}" var="cate">
                                <option value="${cate.id}">${cate.cname}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="input-group">
                        <select class="form-control" id="book_type2">
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="input-group">
                        <label class="input-group-addon">信息类型</label>
                        <select class="form-control" id="info_type">
                            <option value="1">出售</option>
                            <option value="0">收购</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="input-group">
                        <label class="input-group-addon">价格</label>
                        <input type="text" class="form-control" id="price">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="input-group">
                        <label class="input-group-addon">数量</label>
                        <input type="text" class="form-control" id="num">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="input-group">
                        <label class="input-group-addon">作者</label>
                        <input type="text" class="form-control" id="book_author">
                    </div>
                </div>
                <div class="col-md-12">
                    <textarea class="form-control" id="intro" rows="4" placeholder="添加描述..."></textarea>

                </div>
                <div class="col-md-12">
                    <div style="width: 100%;position: relative;">
                        <form id="upBox">
                            <div id="inputBox" style="background-color: #ffffff">
                                <input type="file" title="请选择图片" id="file" multiple accept="image/png,image/jpg,image/gif,image/JPEG"/>
                                点击选择图片
                            </div>
                            <div id="imgBox"></div>
                            <a id="btn">发布</a>
                        </form>
                    </div>
                </div>
                <div class="col-md-12">
                </div>
            </div>

        </div>
        <!--TOP AUTHERS END-->
    </div>
    <!--CONTENT END-->
    <div class="copyrights">
        <div class="container">
            <p>Copyrights © 2015-16 KodeForest. All rights reserved</p>
            <div class="cards"><img src="images/cards.png" alt=""></div>
        </div>
    </div>
</div>
<!--WRAPPER END-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/js/bootstrap.min.js"></script>
<script src="/js/dl-menu/modernizr.custom.js"></script>
<script src="/js/dl-menu/jquery.dlmenu.js"></script>
<script src="/js/jquery.bxslider.min.js"></script>
<script src="/js/bootstrap-slider.js"></script>
<script src="/js/waypoints.min.js"></script>
<script src="/js/jquery.counterup.min.js"></script>
<script src="/js/functions.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/uploadImg.js"></script>
<script type="text/javascript">
    imgUpload({
        inputId:'file',
        imgBox:'imgBox',
        buttonId:'btn',
        upUrl:'/ubook/image/up',
        data:'file',
        num:"5"
    });
    getCategoryList();
    $("#book_type").change(function (){
        console.log($("#book_type").val());
        getCategoryList();
    });
    function getCategoryList(){
        $.ajax({
            type:"GET",
            data:{"parentId":$("#book_type").val()},
            url:"/getCategory",
            success:function (data){
                var cs = data.data;
                var s = "";
                for (let i = 0; i < cs.length; i++) {
                    s+='<option value="'+cs[i].id+'">'+cs[i].cname+'</option>'
                }
                $("#book_type2").html(s);
            }
        });
    }
</script>
</body>
</html>
